<template>
  <div class="drag-container">
    <a-card :style="{ 'margin-bottom': '10px' }">
      <a-button
        type="primary"
        :style="{ 'margin-right': '10px' }"
        @click="onReset"
        >还原</a-button
      >
    </a-card>
    <a-card class="drag-card">
      <a-row :gutter="16">
        <draggable
          v-model="dragList"
          group="drag"
          animation="500"
          class="drag-content"
          item-key="id"
          @update="onSort"
        >
          <template #item="{ element }">
            <a-col span="6" :key="element.id">
              <a-card class="content-card">
                <SvgIcon
                  :name="element.icon"
                  :color="element.color"
                  :class-value="{ width: '28px', height: '28px' }"
                  >{{ element.color }}</SvgIcon
                >
                按住拖拽
              </a-card>
            </a-col>
          </template>
        </draggable>
      </a-row>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import draggable from "vuedraggable";
import DragDataService from "@/service/dragService";
import { IDragItem } from "@/type/Drag";
import SvgIcon from "@/components/SvgIcon/index.vue";
import cloneDeep from "lodash/cloneDeep";

let dragList = ref<IDragItem[]>([]);
let originDragList = ref<IDragItem[]>([]);

/**
 * 获取拖拽的元素
 */
const getDragData = () => {
  DragDataService.getDragData().then((res) => {
    dragList.value.length = 0;
    dragList.value.push(...res);
    originDragList.value = cloneDeep(dragList.value);
  });
};
/**
 * 只有拖拽顺序改变的时候回调
 * @param param
 */
const onSort = (param: { newIndex: number; oldIndex: number }) => {};
const onReset = () => {
  dragList.value = cloneDeep(originDragList.value);
};
onMounted(() => {
  getDragData();
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.drag-container {
  margin: 20px;
  height: calc(100% - 80px);

  .drag-card {
    height: calc(100% - 80px);
    width: 100%;
    overflow: hidden scroll;

    .drag-content {
      display: contents;

      .content-card {
        display: flex;
        justify-content: center;
        margin: 10px 0;
        min-width: 32px;

        :hover {
          cursor: move;
        }

        .my-svg {
          display: block;
          margin: 4px auto;
        }
      }
    }
  }
}
</style>
